<template>
	<view class="box-main">
		<!-- 导航栏 -->
		<view>
			<view class="flex ac sb pb-20 ">
				<!-- 导航栏 -->
				<view class="box-tabs">
					<view @click="tabChange(0)" class="flex ac jc fc pos-r">
						<view :style="{fontSize:current==0?'34rpx':''}">
							<text :style="{color:current==0?'#0808D8':''}">待处理</text>
							<text>申请</text>
						</view>
						<view v-if="current == 0" class="pos-a" style="top: 26rpx;">
							<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
								style="width: 50rpx;height: 15rpx;">
							</image>
						</view>
					</view>
					<view @click="tabChange(1)" class="flex ac jc fc pos-r">
						<view :style="{fontSize:current==1?'34rpx':''}">
							<text :style="{color:current==1?'#0808D8':''}">已发送</text>
							<text>请求</text>
						</view>
						<view v-if="current == 1" class="pos-a" style="top: 26rpx;">
							<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
								style="width: 50rpx;height: 15rpx;">
							</image>
						</view>
					</view>
					<view @click="tabChange(2)" class="flex ac jc fc pos-r">
						<view :style="{fontSize:current==2?'34rpx':''}">
							<text :style="{color:current==2?'#0808D8':''}">已对接</text>
							<text>申请</text>
						</view>
						<view v-if="current == 2" class="pos-a" style="top: 26rpx;">
							<image src="https://yjgs.jsonbug.com/test/wx-tabls-select.png"
								style="width: 50rpx;height: 15rpx;">
							</image>
						</view>
					</view>
				</view>
				<!-- end -->
			</view>
		</view>
		<!-- end -->


		<block v-if="current == 0">
			<view @click="toPage('待处理申请',item)" v-for="(item,index) in dataList" :key="index"
				class="mb-20 bg-white shadow-2 m-20 br-12">
				<view class="box-apply">
					<view class="flex ac">
						<view>
							<image :src="item.card_info.avatar" mode="aspectFill"
								style="width: 100rpx;height: 100rpx;border-radius: 100%;">
							</image>
						</view>
						<view class="ml-20">
							<view>
								<text class="fw fs-34">{{item.card_info.name || ''}}</text>
								<text style="color: #A8A8A8;" class="ml-5 mr-10 fs-30">/</text>
								<text style="color: #A8A8A8;"
									class="fs-26 ">{{item.card_info.position.position || ''}}</text>
								<text v-if="item.is_real == 2" class="iconfont-yjgs ml-10 c-666">
									&#xe6eb;
								</text>
								<text v-if="item.is_real == 1" class="iconfont-yjgs ml-10" style="color: #00009E;">
									&#xe6eb;
								</text>
							</view>
							<view class="mt-10">
								<text class="fs-26"
									style="color: #A8A8A8;">{{item.card_info.position.company_name}}</text>
							</view>
						</view>
					</view>
					<view v-if='item.card_info.collect == 2' class="box-collect-noActive">
						<text>未收藏</text>
					</view>
					<view v-else class="box-collect-noActive"
						style="background-color: #0808D8;border: none;color: white;">
						<text>已收藏</text>
					</view>
				</view>
				<view style="width: 100%;height: 1px;background-color: #F2F2F2;"></view>
			</view>
		</block>
		<block v-if="current == 1">
			<view @click="toPage('交换申请',item)" v-for="(item,index) in dataList" :key="index"
				class="mb-20 p-20 shadow-2 m-20 br-12 bg-white">
				<view class="box-my-send flex  ">
					<view>
						<image :src="item.card_info.avatar" mode="aspectFill"
							style="width: 100rpx;height: 100rpx;border-radius: 100%;">
						</image>
					</view>
					<view class="ml-20" style="width: 100%;">
						<view class="flex sb">
							<view>
								<text class="fw fs-34">{{item.card_info.name || ''}}</text>
								<text style="color: #A8A8A8;" class="ml-5 mr-10 fs-30">/</text>
								<text style="color: #A8A8A8;"
									class="fs-26 ">{{item.card_info.position.position || ''}}</text>
								<text v-if="item.is_real == 2" class="iconfont-yjgs ml-10 c-666">
									&#xe6eb;
								</text>
								<text v-if="item.is_real == 1" class="iconfont-yjgs ml-10" style="color: #00009E;">
									&#xe6eb;
								</text>
							</view>
							<view>
								<text class="fs-24">{{$timer.timeToHow(item.create_time)}}</text>
							</view>
						</view>
						<view class="mt-10 flex sb">
							<text class="fs-24 line-1">{{item.remark || ''}}</text>
							<text style="color: #0808D8;min-width: 140rpx;text-align: end;"
								class="fs-24 ml-20">{{item.status == 1 ? '对方已同意' : '等待对方同意'}}</text>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 1px;background-color: #F2F2F2;"></view>
			</view>
		</block>
		<block v-if="current == 2">
			<view @click="toPage('已对接',item)" v-for="(item,index) in dataList" :key="index"
				class="mb-20 shadow-2 m-20 br-12 bg-white">
				<view class="box-apply">
					<view class="flex ac">
						<view>
							<image :src="item.card_info.avatar" mode="aspectFill"
								style="width: 100rpx;height: 100rpx;border-radius: 100%;">
							</image>
						</view>
						<view class="ml-20">
							<view>
								<text class="fw fs-34">{{item.card_info.name || ''}}</text>
								<text style="color: #A8A8A8;" class="ml-5 mr-10 fs-30">/</text>
								<text style="color: #A8A8A8;"
									class="fs-26 ">{{item.card_info.position.position || ''}}</text>
								<text v-if="item.is_real == 2" class="iconfont-yjgs ml-10 c-666">
									&#xe6eb;
								</text>
								<text v-if="item.is_real == 1" class="iconfont-yjgs ml-10" style="color: #00009E;">
									&#xe6eb;
								</text>
							</view>
							<view class="mt-10">
								<text class="fs-26"
									style="color: #A8A8A8;">{{item.card_info.position.company_name}}</text>
							</view>
						</view>
					</view>
					<view class="box-collect-noActive ml-10" style="min-width: 160rpx;">
						<text>查看名片</text>
					</view>
				</view>
				<view style="width: 100%;height: 1px;background-color: #F2F2F2;"></view>
			</view>
		</block>


		<!-- 加载更多 -->
		<uni-load-more v-if="dataList.length >= 10" :status="status" />
		<!-- end -->

		<!-- 待处理 -->
		<emptyPage v-if="dataList.length == 0"></emptyPage>
		<!-- end -->


	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		cardShareList,
		cardRead
	} from '@/api/extend.js'
	import emptyPage from "@/pages/extend/components/emptyPage.vue"
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				current: 0,
				options: {},
				dataList: [],
				current_page: 1,
				status: 'loading', // more loading noMore
				current: 0, //0 待处理 1 我发送 2 已对接
				tabList: [{
						key: '1',
						value: '待处理申请'
					},
					{
						key: '2',
						value: '我发送的'
					},
					{
						key: '3',
						value: '已对接'
					},
				],
			}
		},
		onLoad(options) {
			if (!this.isLogin) {
				toLogin();
				return;
			}
			this.current = options.current || 0;
			this.cardShareListFunc({
				type: (this.current - 1) + 2,
			});

			if (this.msgObj.num > 0) {
				this.cardReadFunc();
			}

			uni.$on('applyDescSuccessRefer', () => {
				this.current_page = 1;
				this.current = 2
				this.dataList = [];
				this.cardShareListFunc({
					type: 3,
				});
			})
		},

		onReachBottom() {
			if (this.status == 'noMore') return;
			this.current_page++;
			this.cardShareListFunc({
				type: this.current + 1
			})
		},
		computed: {
			msgObj() {
				return this.$store.state.extend.customMsg
			},
			isLogin() {
				return this.$store.state.app.token
			}
		},
		methods: {
			cardReadFunc() {
				cardRead().then(res => {
					if (res.status == 200) {
						this.$store.commit('SET_CustomMsg', {
							tag: '我的',
							label: '名片-待处理',
							num: 0
						});
					}
				})
			},
			cardShareListFunc({
				type,
				page,
				limit
			}) {
				this.status = 'loading';
				cardShareList({
					type: type,
					page: this.current_page,
					limit: 10
				}).then(res => {
					let data = res.data.data;
					this.current_page = res.data.current_page;

					if (data.length < 10) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}
					this.dataList = [...this.dataList, ...data];
				})
			},
			toPage(tag, item) {
				if (tag == '待处理申请') {
					this.$store.commit('SET_CardProcessing', item);
					uni.navigateTo({
						url: '/pages/extend/connection/apply_desc?id=' + item.id
					})
					return
				}

				if (tag == '交换申请') {
					uni.navigateTo({
						url: '/pages/extend/connection/index_desc?id=' + item.card_info.id
					})
					return
				}

				if (tag == '已对接') {
					uni.navigateTo({
						url: '/pages/extend/connection/index_desc?id=' + item.card_info.id
					})
					return
				}
			},
			tabChange: function(index) {
				this.current = index;
				this.current_page = 1;
				this.dataList = [];
				this.cardShareListFunc({
					type: this.current + 1,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box-tabs {
		margin-top: 20rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		font-size: 32rpx;
		box-sizing: border-box;
		width: 100%;
		height: 90rpx;
		opacity: 1;
		background: #FFFFFF;
		padding-bottom: 10rpx;
	}

	.box-main {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.box-collect-noActive {
		margin-left: 10rpx;
		border: 2rpx solid #00009E;
		font-size: 28rpx;
		border-radius: 60rpx;
		text-align: center;
		color: #00009E;
		width: fit-content;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
	}

	.box-apply {
		padding: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>